<template>
  <div class="header">
    <fheader></fheader>
    <!-- <div class="box"></div> -->
    <el-row>
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <div style="margin:80px 100px;" v-for="i in leftFolkloricList" :key="i.id">
            <el-card style="padding:20px 40px;">
              <img :src="i.image" style="width:100%;height:100%; vertical-align: middle;">
              <div style="margin-top:30px;">
                <h1>
                  {{i.title}}
                </h1>
                <div style="margin-top:15px;font-size:20px;">
                  {{i.text}}
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
      <el-col :span="5" class="">
        <div class="right-background"></div>
        <div class="grid-content bg-purple" style="margin-left:60px;">
          <div style="font-size:24px;margin-top:100px;font-weight:bold;">民俗活动</div>
          <el-card style="margin-top:10px;">
            <div>
              <ul style="display:flex;flex-direction: column;">
                <li style="cursor: pointer;z-index:333;" class="foodTitle mp-10" v-for="(i, index) in folkloricTitleList"
                  :key="index" @click="handleText(index)">
                  <i class="el-icon-star-on" style="margin-top:5px;"></i>
                  {{i.title}}
                </li>
              </ul>
            </div>
          </el-card>
          <!-- <strong style="font-size:24px;position: relative;top:70px;">热点民俗</strong>
          <ul class="flex">
            <li v-for="item in folkloricList" :key="item.id" style="width: 100%;">

              <el-card class="card">
                <div style="display:flex;flex-direction: column">
                  <img style="width:100%;height:250px;" :src="item.image" alt="">
                  <div class="card-right" style="">
                    <h2 style="margin-top:20px;">{{item.title}}</h2>
                  </div>
                </div>



              </el-card>
            </li>
          </ul> -->
        </div>
      </el-col>
    </el-row>
    <Ffooter />
  </div>
</template>

<script>
  import fheader from "@/components/Header.vue"
  import Ffooter from '@/components/footer.vue'
  export default {
    components: {
      fheader,
      Ffooter
    },
    data() {
      return {
        folkloricList: [],
        leftFolkloricList: [{
          id: 0,
          image: 'https://tse1-mm.cn.bing.net/th/id/R-C.e431faf6587e4683bf76df097652d225?rik=FtengKx5Uol9hw&riu=http%3a%2f%2fi8.qhimg.com%2ft01cbf86f8d50f65e71.jpg&ehk=M0%2fcz%2fI9%2f%2fKS4S7petSkAxScpASjI8PCzcSfUWkXhMQ%3d&risl=&pid=ImgRaw&r=0',
          title: '大奏鼓',
          text: `大奏鼓是流传在石塘镇箬山一带渔区的民间舞蹈。大奏鼓舞蹈动作粗犷而滑稽，边奏边舞，舞者全为男性，服饰打扮却是女性，在汉族舞蹈中不多见，具有独特的地方色彩。
　　据福建《惠安县志》和《琅轩陈氏宗谱》载，箬山陈姓为十七世纪中叶由惠安迁入，大奏鼓（当时叫“大典鼓”）亦随之带入，距今有360余年历史。由于长期来石塘为半岛偏僻之地，大奏鼓才得以流传下来。至上世纪五十年代，大奏鼓逐渐被冷落，文革时期已销声匿迹。

　　1979年初，在我市文化部门的组织下，里箬村的一批老人，重新跳起已消失近二十年的大典鼓。当时，钟永余、陈其盈、陈其胜等人参与挖掘整理，并改名《大奏鼓》上报，后被收入《中国民间舞蹈集成》，并被拍入电视专题片《渔村小叙》，在中央电视台多次播放。

　　大奏鼓为男子群舞，基本动作是扭腰、甩胯、摇头，人手一件打击乐器，边敲边舞，基本节奏为强弱二拍子。化妆很简单，用牙粉加水涂于脸上，再用红纸在两脸颊印上鸡蛋大小的红圈。最初的服装为闽南惠安女子打扮，老式大襟便服，花布衫，头饰用布条、纱巾，装上羊角尖发簪，两耳挂大耳环，赤脚套脚环。后改成上穿深蓝色斜襟短袄，下穿桔黄色大口裤，衣衫边角绣上桔红色鱼纹图案花边，头戴橄榄形黑色羊角帽，两耳挂金花、戴耳环，赤脚板，套上手镯脚镯。打鼓者为男装，对襟短袄，头扎红布条。`
        }],
        folkloricTitleList: []
      }
    },
    mounted() {
      this.getFolkloricList()
      // this.getbeautyList()
    },
    methods: {
      getFolkloricList() {
        this.$api.folkloric.getFolkloric().then(response => {
          this.folkloricTitleList = response.data
          response.data.map((item, i) => {
            if (i < 4) return this.folkloricList.push(item)

          })
          // 'id':item.id,
          // 'image':item.image,
          // 'title':item.title,
          // 'text':item.text

        })
      },
      handleText(e) {
        console.log(e);
        this.leftFolkloricList = []
        this.leftFolkloricList.push(this.folkloricTitleList[e])
      }
    }
  }

</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // position: relative;
  }

  .box {
    // position: absolute;
    top: 0;
    // z-index: 0;
    width: 100%;
    height: 300px;
    background: rgba(1, 94, 75, 0.5);
  }

  // >>>.el-card__body {
  //   // display: flex;

  // }

  .card {
    width: 100%;
    height: 400px;

    .card-right {
      flex: 1;
      display: inline-block;
    }
  }

  .flex>li {
    z-index: 2;
    // width: 1440px;
    // height: 400px;
    margin-top: 80px;
    margin-bottom: 20px;
    // border: 1px solid black;
  }

  .right-background {
    position: absolute;
    width: 25%;
    height: 100%;
    background: url('../assets/foodbackground.png');
    opacity: 0.05;
  }

  .foodTitle:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.349);
  }

  .mp-10 {
    margin: 5px 10px;
    padding: 0px 0 15px 0px;
    font-size: 24px;
    font-weight: bold;

  }

  // .mp-10::before {
  //   content: '';
  //   display: inline-block;
  //   height: 20px;
  //   width: 20px;
  //   position: relative;
  //   top: 2px;
  //   margin-top: 5px;
  //   background: url('../assets/folk.png') no-repeat;
  //   background-size: 100%;
  // }

</style>>
